$input-border-focus: $colorPrimary;

@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/custom-forms';
@import 'bootstrap/scss/input-group';

.Field {
  @extend .form-group;
}


.Input {
  @extend .form-control;

  &.-sm {
    @extend .form-control-sm;
  }

  &.-lg {
    @extend .form-control-sm;
  }

  &:focus {
    border-color: var(--colorPrimary);
  }
}

.InputRadio,
.InputCheckbox {

  input {
    display: none;
  }

	span {
		padding: 0;
		padding-right: 10px;
	}

	span:before {
		font-family: FontAwesome;
		font-size: 21px;
		display: inline-block;
		vertical-align: middle;
		color: var(--colorDivider);
	}

	input:checked + span:before {
		color: var(--colorPrimary);
	}

	input:disabled + span:before {
		opacity: 0.5;
		cursor: not-allowed;
	}

	input:checked:disabled  + span:before {
		color: var(--colorDivider);
	}
}

.InputCheckbox {

	span:before {
		content: "\f0c8";
	}

	input:checked + span:before {
		content: "\f14a";
	}

	&.-rounded {
		input + span:before {
			content: "\f111";
		}

		input:checked + span:before {
			content: "\f058";
		}
	}
}

.InputRadio {
	span:before {
		content: "\f111";
	}

	input:checked + span:before {
		content: "\f192";
	}

	&.-squared {
		input + span:before {
			content: "\f0c8";
		}
		input:checked + span:before {
			content: "\f14a";
		}
	}
}
